
<script setup>
// 扩展属性：proOptions 用于统一扩展功能配置
import { computed,ref } from 'vue'

// 透传所有原有 vxetable 属性
const props = defineProps({
  // vxetable 原有属性（如 columns、data、等）
  columns: Array,
  data: Array,
  // ...可继续补充常用属性

  // 扩展属性
  proOptions: {
    type: Object,
    default: () => ({})
  }
})

// 处理扩展功能（示例：统一设置所有列的对齐方式）
const mergedColumns = computed(() => {
  if (!props.proOptions.align) return props.columns
  return props.columns?.map(col => ({
    ...col,
    align: col.align || props.proOptions.align
  }))
})

import { useAttrs } from 'vue'
const attrs = useAttrs()
// 默认配置，可根据实际需求扩展
const defaultProps = {
  border: true, // 默认设置边框，外置优先可以覆盖内置属性
  stripe: true,
  size: 'small', // 默认大小 small
  // ...其他默认配置
}
// 合并后的配置，包含 $attrs
const gridOptions = computed(() => ({
  ...defaultProps,
  ...props,
  ...attrs,
  columns: mergedColumns.value
}))
const vxeGirdProRef = ref(null)
// 暴露实例
function Instance() {
    return vxeGirdProRef.value
}
// 暴露实例方法
defineExpose({
  Instance,
})
</script>

<template>
  <!-- 透传所有属性，合并扩展功能 -->
  <vxe-grid ref="vxeGirdProRef" v-bind="gridOptions">
    <template v-for="(_, name) in $slots" #[name]="slotProps">
      <slot :name="name" v-bind="slotProps" />
    </template>
  </vxe-grid>
</template>

<style scoped>
/* 可在此扩展样式 */
</style>
